<script setup lang="ts">
import { computed } from 'vue';
import { useSect } from '../../../composables';

const emit = defineEmits<{
  (e: 'join', id: string): void;
}>();

const { state: sectState } = useSect();

const sectList = computed(() => {
  return sectState.value.sectList;
});

function onJoinClick(id: string) {
  emit('join', id);
}
</script>

<template>
  <div
    class="sect-list w-full h-full bg-container-background overflow-auto p-2 flex flex-col gap-2"
  >
    <a-card v-for="item in sectList" :key="item.config.id">
      <div class="flex items-center">
        <div class="flex-1">
          <div class="font-bold text-base flex items-center gap-1">
            <div>{{ item.config.name }}</div>
          </div>
          <div>{{ item.config.description }}</div>
        </div>
        <div class="flex-none">
          <a-button @click="onJoinClick(item.config.id)">加入</a-button>
        </div>
      </div>
    </a-card>
  </div>
</template>

<style scoped>
.sect-list :deep(.ant-card-body) {
  padding: 16px;
}
</style>
